@charset "utf-8";
.container-fluid {
    padding: 0;
    header {
        background: #222222;
        .my_nav {
            border: none;
            background: none;
            margin: 0;
        }
        .navbar-default .navbar-nav>li>a {
            color: #9D9D9D;
        }
        .navbar-default .navbar-nav>.active>a,
        .navbar-default .navbar-nav>.active>a:hover,
        .navbar-default .navbar-nav>.active>a:focus {
            background: #080808;
            color: #FFFFFF;
            border-bottom: 2px solid white;
        }
        .navbar-brand {
            padding: 7px 15px;
        }
        .navbar-default .navbar-nav>li>a:hover {
            background: #080808;
            color: #FFFFFF;
            
        }
        .navbar-default .navbar-nav>.open>a,
        .navbar-default .navbar-nav>.open>a:hover,
        .navbar-default .navbar-nav>.open>a:focus {
            background: #080808;
            color: #FFFFFF;
            
        }
        .navbar-nav > li > .dropdown-menu{
            background: #222222;
            a{
                color:#9D9D9D;
//              background:#E7E7E7;
                &:hover{
                    
                    background: #080808;
                    color: #FFFFFF;
                }
            }
        }
    }
    .kv {
        .img-responsive,
        .thumbnail>img,
        .thumbnail a>img,
        .carousel-inner>.item>img,
        .carousel-inner>.item>a>img {
            width: 100%;
        }
    }
    .engine {
        background: #fbfaf7;
        border-bottom: 1px solid #eaeaee;
        .container {
            background: url(../img/iphone.jpg) no-repeat right center;
            padding-top: 106px;
            padding-bottom: 144px;
            .slideInDown{
                transition: all 3s ease;
            }
            .engine_top {
                padding-bottom: 78px;
                
                div:nth-of-type(1) {
                    color: #0078d7;
                    font-size: 48px;
                    line-height: 84px;
                    font-weight: bold;
                }
                div:nth-of-type(2) {
                    color: #666666;
                    font-size: 30px;
                }
            }
            .engine_middle {
                .engine_text {
                    div:first-of-type {
                        font-size: 20px;
                        color: #333333;
                        line-height: 34px;
                    }
                    div:last-of-type {
                        font-size: 14px;
                        color: #666666;
                        line-height: 24px;
                    }
                }
                .engine_icon {
                    cursor: pointer;
                    width: 64px;
                    height: 64px;
                    background: url(../img/shandian.png) no-repeat center #0078D7;
                    border-radius: 3px;
                    transition: all 1s ease-in-out;
                    &:hover {
                        transform: rotate(360deg);
                        background-color: gray;
                    }
                }
                .engine_icon1 {
                    background: url(../img/shandian.png) no-repeat center #0078D7;
                }
                .engine_icon2 {
                    background: url(../img/2.png) no-repeat center #0078D7;
                }
                .engine_icon3 {
                    background: url(../img/3.png) no-repeat center #0078D7;
                }
                .engine_icon4 {
                    background: url(../img/4.png) no-repeat center #0078D7;
                }
                .margin_42 {
                    margin-bottom: 42px;
                }
            }
        }
    }
    .advantage {
        .container {
            padding-top: 113px;
            padding-bottom: 105px;
            background: url(../img/jiangbei.jpg) no-repeat 10% center;
            .advantage_top {
                padding-bottom: 44px;
                div {
                    font-size: 48px;
                    color: #8fc31f;
                    font-weight: bold;
                }
            }
            .advantage_middle {
                .advantage_icon {
                    cursor: pointer;
                    width: 64px;
                    height: 64px;
                    border-radius: 50%;
                }
                .advantage_icon1 {
                    background: url(../img/5.png) no-repeat center #8fc31f;
                }
                .advantage_icon2 {
                    background: url(../img/6.png) no-repeat center #8fc31f;
                }
                .advantage_icon3 {
                    background: url(../img/7.png) no-repeat center #8fc31f;
                }
                .advantage_icon4 {
                    background: url(../img/8.png) no-repeat center #8fc31f;
                }
                .advantage_text {
                    line-height: 64px;
                    color: #666666;
                    font-size: 14px;
                }
                .margin_16 {
                    margin-bottom: 16px;
                }
            }
        }
    }
    .family {
        background:#0079d7;
        .container{
            
            padding-top: 107px;
            padding-bottom: 141px;
            .family_top {
                padding-bottom: 70px;
                div{
                    color: #fffefe;
                    font-size: 48.45px;
                    text-align: center;
                }
            }
            .family_middle {
                .container{
//                  margin-left: 24%;
                    .family_name{
                        font-size: 32.89px;
                        color: #fffefe;
                    }
                    .family_content{
                        font-size: 14px;
                        color: #fffefe;
                    }
                    .margin_74{
                        margin-bottom: 74px;
                    }
                }
            }
        }
    }
    .game{
        .container{
            padding-bottom: 60px;
            .game_top{
            color:#2a2a2a;
            font-size: 34.65px;
            padding-top: 89px;
            padding-bottom:44px;
            text-align: center;
            a{
                font-size: 14px;
                color:#2a2a2a;
                
            }
        }
        .game_middle{
            text-align: center;
            .img_sty img{
                border-radius: 10px;
                height: 201px;
                width: 371px;
                
            }
            .game_list{
                text-align: center;
                img{
                    width: 67px;
                    height: 67px;
                    
                }
                a{
                    color: #2a2a2a;
                    display: block;
                }
                .margin_30{
                    margin-bottom: 30px;
                }
            }
            
        }
        }
    }
    .partner{
        background: #F4F4F4;
        .container{
            padding-top: 40px;
            padding-bottom: 64px;
            .partner_top{
                padding-left: 15px;
                padding-bottom: 30px;
                span:nth-of-type(1){
                    font-size: 30px;
                    color: #2a2a2a;
                }
                span:nth-of-type(2){
                    font-size: 11.21px;
                    color: #777777;
                }
            }
            .partner_middle{
                text-align: center;
                img{
                    width:150px;
                }
                .margin_21{
                    margin-bottom: 21px;
                }
            }
        }
    }
    footer{
        background: #3b3b3b;
        .container{
            padding-top: 35px;
            padding-bottom: 35px;
            vertical-align: middle;
            .footer_text{
                div:nth-of-type(1){
                    padding-bottom: 12px;
                    a{
                        color: #a1a3ab;
                        margin-right: 18px;
                    }
                }
                div:nth-of-type(2){
                    font-size: 11.19px;
                    color: #a1a3ab;
                }
            }
            .footer_icon>.margin_middle{
                div{
                   
                    float: left;
                    cursor: pointer;
                    position: relative;
                    
                }
            }
            .hover{
                img:nth-of-type(2){
                    position: absolute;
                    left: 50%;
                    bottom: 100%;
                    transform: translateX(-48%);
                    width: 0;
                    height: 0;
                }
                &:hover{
                    img:nth-of-type(2){
                        transition: all 0.3s ease;
                        width: 142px;
                        height:142px;
                    }
                }
            }
            
            .margin_r_20{
                margin-right: 20px;
            }
        }
        
    }
   
}
@media only screen and (max-width: 991px){
    .container-fluid .engine .container{
        padding-top: 20px;
        padding-bottom: 20px;
        background: none;
    }

        .container-fluid .engine .container .engine_top div:nth-of-type(1){
            text-align: center;
        }
        .container-fluid .engine .container .engine_top div:nth-of-type(2){
            font-size: 26px;
            text-align: center;
        }
        .container-fluid .engine .container .engine_middle .engine_icon{
            margin: 0 auto;
        }
        .engine_text{
            text-align: center;
        }
        .container-fluid .advantage .container{
            padding-top: 20px;
            padding-bottom: 20px;
            text-align: center;
            background: none;
        }
        .container-fluid .advantage .container .advantage_middle .advantage_icon{
            margin: 0 auto;
        }
        .container-fluid .family .container{
            padding-top: 20px;
            padding-bottom: 20px;
            text-align: center;
        }
////      .container-fluid .family .container>.row{
//          margin-bottom: 20px;
//      }
        .container-fluid .family .container>.row>div{
            margin-bottom: 20px;
        }
        .container-fluid .family .container .family_middle .container .margin_74{
            margin-bottom: 0;
        }
        .container-fluid .game .container .game_middle .game_list .margin_30{
            margin-bottom: 0;
        }
        .container-fluid .game .container .game_middle .game_list .margin_30>div{
            padding-bottom: 10px;
        }
        .game_list_two>div{
            padding-bottom: 10px;
        }
        .game_radio{
            padding-bottom: 20px;
        }
        .container-fluid .partner .container .partner_middle .margin_21{
            margin-bottom: 0;
        }
        .partner_middle>.row>div{
            margin-bottom: 10px;
        }
        .footer_text{
            text-align: center;
        }
        .footer_icon{
            padding-top: 15px;
            
        }
        .margin_middle{
            width: 154px;
            margin: 0 auto;
        }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .container{
        padding-left: 0;
        padding-right: 0;
        .nav > li > a{
        padding: 14px 4px;
    }
    }
}
@media only screen and (min-width: 320px) and (max-width:376px){
    .container-fluid .game .container .game_middle .img_sty img{
        width: 100%;
    }
    .container-fluid .game .container .game_top{
        font-size: 14px;
    }
    .container-fluid .family .container .family_top{
        padding: 0;
    }
    .container-fluid .engine .container .engine_top{
        padding-bottom: 20px;
    }
    .container-fluid .engine .container .engine_top div:nth-of-type(1){
        font-size: 41px;
    }
    .container-fluid .family .container .family_top div{
        font-size: 37px;
    }
}
